<template>

  <div class="container" style="position: relative;left: 50px;width: 1100px;margin: 0 auto">

      <el-container class="container">
        <el-header>
<el-card class="topCar">
    <div class="top-bar"  >

<!--      头像-->
      <div class="avatar-container" >

        <el-upload
            v-model:file-list="fileList"
            action="http://localhost:8080/v1/file/upload"
            name="file"
            limit="1"
            list-type="picture-card"
            :on-success="afterUpload"
        >
          <el-icon><Avatar /></el-icon>
        </el-upload>

        <el-dialog
            title="保存图片"
            v-model="centerDialogVisible"
            width="50%"
        >
          <span>图片已成功上传，是否保存为默认头像？</span>
          <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
        </el-dialog>
      </div>
<!--     顶部信息内容栏-->
      <div class="user-info" >
        <div class="username">
          {{ savaPeopleForm.nickname }}
        </div>
        <div class="group" >
        <div class="info-item">
          <div class="f1" style="margin-right: 15px">
            <span style="margin-right: 10px">|</span >
            <span class="info-value" style="font-size: 22px">{{ savaPeopleForm.collect}}</span>
            <span class="info-label">收藏</span>
          </div>

          <div class="f2" style="margin-right: 15px">
            <span style="margin-right: 10px">|</span >
            <span style="font-size: 22px">{{ savaPeopleForm.follow }}</span>
            <span>关注</span>
          </div>
          <div class="f3" style="margin-right: 15px">
            <span style="margin-right: 10px">|</span >
            <span style="font-size: 22px">{{ savaPeopleForm.fan }}</span>
            <span>粉丝</span>
          </div>

        </div>
        </div>
      </div>

<!--      退出登录-->
      <el-row :gutter="10">
        <el-col :span="6" style="position: relative;">
          <el-dropdown trigger="click" style="position:relative;">
                     <span style="font-size:19px;font-weight: bold;">
                         <el-icon style="font-size:21px;color: #0089BA"><User/></el-icon>
                         <el-icon style="color: #0089BA"><arrow-down/></el-icon>
                     </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
      </div>
   </el-card>
        </el-header>
        <el-footer>
    <div class="content-wrapper">

      <el-card style="height: 62px;width: 87.5%;margin-top: 135px">
      <!-- 侧边栏内容 -->
      <div class="sidebar">

        <el-menu
            text-color="#0089BA"
            active-text-color="##e1f3d8"
            background-color="#0000"
            unique-opened router
            @select="handleSelect"
            mode="horizontal"
        >
            <el-menu-item index="/collect" >
              <el-icon style="font-size:21px;"><Star /></el-icon>
              <span>收藏</span>
            </el-menu-item>
          <el-menu-item index="/follow">
            <el-icon style="font-size:21px;"><Aim /></el-icon>
            <span>关注</span>
          </el-menu-item>
          <el-menu-item index="/fan">
            <el-icon style="font-size:21px;"><Sugar /></el-icon>
            <span>粉丝</span>
          </el-menu-item>
          <el-menu-item index="/people">
            <el-icon style="font-size:21px;"><EditPen /></el-icon>
            <span>个人资料</span>
          </el-menu-item>
          <el-menu-item index="/account">
            <el-icon style="font-size:21px;"><Edit /></el-icon>
            <span>账号设置</span>
          </el-menu-item>
        </el-menu>
      </div>
      </el-card> </div>
     </el-footer>
      <el-main>
      <div class="main-content">
        <router-view/>
        <!-- 点击侧边栏所显示的内容 -->
      </div>
      </el-main>

      </el-container>
  </div>

</template>

<script setup>

import {onMounted, ref} from "vue";
import { nextTick } from 'vue';
import { Plus } from '@element-plus/icons-vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";


//图片上传开始
const fileList = ref([])

const dialogVisible = ref(false)
const user = ref(getUser())
const centerDialogVisible=ref(false);
const savaPeopleForm = ref({
  avatar:'',
  nickname:''
})

//图片上传结束

const afterUpload=()=>{
  savaPeopleForm.value.avatar = fileList.value[0].response.data;

  console.log(savaPeopleForm.value)
  let data = qs.stringify(savaPeopleForm.value)
  axios.post(BASE_URL + '/v1/user/updateAvatar/' , data).then((response)=>{
    if(response.data.code==2000){
      dialogVisible.value = false;
      ElMessage.success('头像上传成功!');
      loadPage();
     // location.reload();
    }else {
      ElMessage.error(response.data.msg);
    }
  })

}


const loadPage = ()=>{
 let id = getUser().id;
 console.log(id);
 // let data= qs.stringify(savaPeopleForm.value);
  user.value=qs.stringify(savaPeopleForm.value)
  console.log(user.value)
  axios.get(BASE_URL+'/v1/user/select?'+id).then((response)=>{
    if (response.data.code==2000){
      savaPeopleForm.value = response.data.data[0];
      console.log(savaPeopleForm.value)
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
onMounted(()=> {
  loadPage();//一进入页面就需要加载个人信息
})
const handleSelect = (index) =>{
 console.log(index)
}
const logout = ()=>{
  if (confirm('确定要退出吗?')){
    localStorage.removeItem('user');
    window.location.href = '/login';
    user.value = '';
  }
}

</script>

<style scoped>
.container {
  width: 100%; /* 设置容器宽度为 80% */
  display: flex;
  flex-direction: column;
  height: 135vh; /* 视口高度 */

}

.top-bar {
  height: 120px; /* 拉长顶部栏，根据需要调整 */
  background-color: #0000; /* 示例背景色 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 水平靠左 */
  padding: 0 20px; /* 内边距 */

}

.avatar-container {
  margin-right: auto; /* 头像靠左，内容靠右 */
  background-size: cover; /* 图像覆盖整个容器 */
  background-position: center; /* 图像居中显示 */
  border-radius: 50%; /* 圆形容器 */
  border: 1px solid #eeeeee;
  overflow: hidden; /* 确保超出容器的部分被隐藏 */
  width: 123px; /* 根据需要设置容器的宽度 */
  height: 123px; /* 根据需要设置容器的高度 */
  object-fit: cover;
}

.content-wrapper {
  flex: 1; /* 占据剩余空间 */
  display: flex;
}

.sidebar {

  background-color: #0000; /* 示例背景色 */
  padding-bottom: 15px;

}

.main-content {
  flex: 1; /* 占据剩余空间 */
  padding: 20px;
  background-color: #0000; /* 示例背景色 */
}
.user-info {
  /* 横放用户名、粉丝数和邮箱 */
  position: relative;
  right: 470px;
  top: 25px;

}
.group{
  display: flex;
  flex-direction: column; /* 垂直堆叠 */
}
.username {
  font-size: 32px; /* 设置用户名字体大小 */
  font-weight: bold; /* 用户名加粗 */
  margin-bottom: 10px; /* 用户名与其他信息的间距 */

}

.info-item {
  display:flex ;
  justify-content: space-between; /* 标签和值之间留有空间 */
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 5px; /* 每个信息项之间的间距 */
  margin-top: 16px;
}

.info-label {
  color: #2c3e50; /* 可以根据需要调整颜色 */
   /* 可以根据需要加粗 */
}
.topCar{
  height: 150px;
  margin-top: 12px; /* 根据需要调整 */
  /* 或者 */
  padding: 15px;
  z-index: 1000;
  margin-bottom: 2px;
  width: 85%;
}
.main-content{

  margin-top: 105px;
  width: 85%;
}
</style>